<!-- 客户排名变动 -->
<template>
  <div class="boxs">
    <div class="top">
        <div class="top1">
            <div class="event">
                关键事件热度走势
            </div>
            <div class="year">
                <el-form :inline="true" :model="bondInfoForm">

            <el-form-item label="年度：">
              <el-select v-model="value" placeholder="请选择" @change="dimension">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
            </div>
        </div>
        <div class="top2">
            <div class="line" id="main" style="width: 100%;height:350px">

            </div>
        </div>
    </div>

    <div class="bottoms">
      <div class="lefts">
        <div class="upper">人民币对美元汇率中间价连续三天调整</div>
        <div class="middle">
          3月24日，人民币对美元汇率中间价调升335个基点，报6.8374，升至今年2月16日以来最高。同时，这也是人民币对美元汇率中间价连续第三天调升。截至3月24日，本周以来，人民币对美元汇率中间价累计调升678个基点。
          近期，在岸、离岸人民币对美元汇率亦双双震荡上行。其中，3月23日，离岸人民币对美元汇率在盘中升破6.82，报6.8107，创2月15日以来新高;收盘报6.8299，较前一日收盘价6.8611上涨312个基点。在岸人民币对美元汇率在盘中升破6.82，为2月15日以来首次:收盘报6.8289，较前一日收盘价6.8903大涨614个基点。
          Wind数据显示，自3月16日以来，美元指数持续走低。3月23日盘中，美元指数一度跌破102，为2月6日以来首次。截至3月23日收盘，美元指数报102.6068，较3月8日创下的年内最高收盘价105.6928已跌近3%。
        </div>
        <!-- <div class="lower">更多></div> -->
      </div>
      <div class="rights">
        <div class="upper">人民币对美元汇率中间价连续三天调整</div>
        <div class="middle">
          3月24日，人民币对美元汇率中间价调升335个基点，报6.8374，升至今年2月16日以来最高。同时，这也是人民币对美元汇率中间价连续第三天调升。截至3月24日，本周以来，人民币对美元汇率中间价累计调升678个基点。
          近期，在岸、离岸人民币对美元汇率亦双双震荡上行。其中，3月23日，离岸人民币对美元汇率在盘中升破6.82，报6.8107，创2月15日以来新高;收盘报6.8299，较前一日收盘价6.8611上涨312个基点。在岸人民币对美元汇率在盘中升破6.82，为2月15日以来首次:收盘报6.8289，较前一日收盘价6.8903大涨614个基点。
          Wind数据显示，自3月16日以来，美元指数持续走低。3月23日盘中，美元指数一度跌破102，为2月6日以来首次。截至3月23日收盘，美元指数报102.6068，较3月8日创下的年内最高收盘价105.6928已跌近3%。
        </div>
        <!-- <div class="lower">更多></div> -->
      </div>
    </div>
  </div>
</template>
  <script>
  import * as echarts from 'echarts';

import { getBond } from "@/api/common/index.js";
//   import earches from "./components/earches.vue";
//   import descend from "./components/descend.vue";
import {
  queryBondProbabilityDetail,
  newBondInfo,
} from "@/api/recommendationSystem/index.js";
import { getMaxListeners } from 'process';
export default {
  name: "",
  components: {
    // earches,
    // descend
  },
  data() {
    return {
        options: [
          {
            value: "选项1",
            label: "北京",
          },
          {
            value: "选项2",
            label: "上海",
          },
          {
            value: "选项3",
            label: "广州",
          },
          {
            value: "选项4",
            label: "杭州",
          },
          {
            value: "选项5",
            label: "重庆",
          },
          {
            value: "选项6",
            label: "大连",
          },
        ],
        value:'',
      //  tabs切换
      activeName: "second",
      drawer: false,
      searchList: [],
      tableData: [],
      searchInput: "",
      bondInfo: {},
      total: 0,
      count: "",
      page: 1,
      bondTotal: 0,
      bondInfoForm: {
        bondSname: "",
        bondId: "",
        value1: "",
      },
    };
  },
  filters: {
    filterNum(value) {
      const str = value ? value.toString() : "";
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
  },
  created(){
    this.getMaxListeners()
  },
  mounted() {
    this.getMaxListeners()
  },
  methods: {
    //折线图
    getMaxListeners(){main
        var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
   axisLine:{
    lineStyle:{
        color:'white',
    }
   }
  },
  yAxis: {
    type: 'value',
    axisLine:{
    lineStyle:{
        color:'white',
    }
   }
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260,235,356,123,256,276],
      type: 'line',
      color:['#1670ac'],
    },
    
  ]
};

option && myChart.setOption(option);

    },
    // tabs切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 文件上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //   新增弹框
    onSubmit() {
      console.log("submit!");
    },
    //
    clearFn() {
      this.bondInfo = {};
    },
    bondInfoSubmit() {
      const param = {
        ...this.bondInfoForm,
        pn: 10,
        page: 1,
      };
      console.log("newBondInfo param", param);
      this.newBondInfo(param);
    },
    glFn(row) {
      return row.assessRate;
      // return Number(Number(row.assessRate) * 100).toFixed(2) + "%"
    },
    zjFn() {
      this.drawer = true;
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: 1,
      };
      this.newBondInfo(param);
    },
    bondRowClick(row) {
      this.drawer = false;
      const param = {
        bondName: row.bondName,
        bondId: row.bondId,
        pn: 10,
        page: 1,
      };
      getBond(param).then((res) => {
        this.bondInfo = res.data.result[0];
      });
      queryBondProbabilityDetail({
        bondId: row.bondId,
        page: 1,
        pn: 10,
      }).then((res) => {
        console.log(res, "resres");
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
    bondPageFn(page) {
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: page,
      };
      this.newBondInfo(param);
    },
    pageFn(currentPage) {
      console.log("pageFn", currentPage);
      queryBondProbabilityDetail({
        bondId: this.bondInfo.bondId,
        page: currentPage,
        pn: 10,
      }).then((res) => {
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
    newBondInfo(param) {
      const _this = this;
      newBondInfo(param).then((res) => {
        _this.searchList = res.data.result;
        _this.bondTotal = Number(res.data.totalResults);
        console.log(res, "resres");
      });
    },
    clickFn(v, i) {
      this.clearFn();
      this.count = i;
      this.bondInfo = {
        ...v,
      };
      queryBondProbabilityDetail({
        bondId: v.bondId,
        page: this.page,
        pn: 10,
      }).then((res) => {
        console.log(res, "resres");
        this.tableData = res.data.result;
        this.total = Number(res.data.totalResults);
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.boxs {
  background-color: #1c2d38;
  padding: 0px !important;
  margin: 0px !important;
  width: 100%;
  // background-color: red;
  .bottoms {
    width: 100%;
    min-height: 360px;
  }

  .bottoms {
    display: flex;
    .lefts {
      flex: 1;

      background-color: #262d47;
      margin-right: 10px;
      box-sizing: border-box;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      .upper{
        text-align: center;
        line-height: 30px;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: bolder;
      }
      .middle{
        line-height: 30px;

      }
    //   .lower{
    //     float: right;
    //     margin-top: 25px;
    //   }
    }
    .rights {
      flex: 1;

      background-color: #262d47;
      box-sizing: border-box;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      .upper{
        text-align: center;
        line-height: 30px;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: bolder;
      }
      .middle{
        line-height: 30px;

      }
      .lower{
        float: right;
        margin-top: 25px;
      }
    }
  }

  .top {
    width: 100%;
    flex: 1;
    height: 400px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background-color: #262d47;
    .top1{
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
      padding-left: 15px;
    //   padding-right: 15px;
      padding-top: 10px;
      .event{
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
</style>
  